<template>
  <div class="social-container">
    <div class="app-container">
      <div style="border: 1px solid #ccc; padding: 20px">
        {{ msg }}
        <!-- v-model是怎么实现的? :value + @input 组合实现 v-model指令的效果-->
        <!-- <son :msg="msg" @changeMsg="changeMsg" /> -->
        <!-- <son :value="msg" @input="changeMsg" /> -->
        <!-- 如果在组件上使用了v-model 子组件内部接收必须用value, 子传父发布的自定义事件必须是input -->
        <son v-model="msg" />
      </div>

    </div>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Social',
  components: { Son },
  data() {
    return {
      msg: '哈哈'
    }
  },
  methods: {
    changeMsg(str) {
      this.msg = str
    }
  }

}
</script>

<style>

</style>
